<template>
<div>
     <fou-dialog :title="'出倉'" v-model:dialogValue="dialogValue" :width="'75%'">
      <template #content="">
    <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="分校" >
             <div>{{form.name}}</div>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="備註" prop="remark">
             <el-input type="textarea" v-model="form.remark"   ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="產品" prop="product" >
              <el-button @click="addProduct"  type="primary" circle icon="Search"></el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="">
            <div style="width:100%">
              <product :list="form.data"></product>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

           <div class="flex justify-end mt-10 w-[100%]" >
            <el-button @click="dialogValue = false">取消</el-button>
            <el-button type="primary" @click="confirm(ruleFormRef,buttonType)" color="#081F42">確定</el-button>
           </div>
      </template>
     </fou-dialog>
    <productDio ref="productRef" @update="getProduct"></productDio>
</div>
</template>

<script setup>
import { ref ,reactive,watch,onMounted} from 'vue' 
import { dayjs } from "element-plus";
import {addTokes,updateTokes} from '@/http/index.js'
import {message} from '@/common/function.js'
import {elProps,status_options} from './index'
import { add, subtract, } from 'high-precision-four-fundamental-rules'
import product from './product.vue'
import productDio from './dialog/product.vue'
const dialogValue = ref(false)
const rules = reactive({
  data: [{ required: true, message: "請選擇學校", trigger: ["blur",'change'] }],
}); 
const form = reactive({
    remark:'',
    data:[],
    name:localStorage.getItem('school_name'),
    school_id:localStorage.getItem('school_id')
});

const props = defineProps({
  echo:Object
})
Object.assign(form,props.echo)
watch(()=>props.echo,(neaval)=>{
  Object.assign(form,neaval)
  console.log(neaval);
})

const productRef = ref('')
const addProduct = ()=>{
productRef.value.TableData()
productRef.value.TableDatatype()
productRef.value.productDia = true
}

const getProduct = (val)=>{
    val.map(e=>e.num = 1)
    form.data = val
}

const ruleFormRef = ref('')
const emit = defineEmits(['update'])
const confirm = (formEl,type)=>{
    if (!formEl) return;
    formEl.validate(async (e)=>{
      if (e) {
          console.log(form);
          if (type == 'add') {
           form.product = JSON.stringify(form.data)
          const data = await addTokes(form)
          if (data.code == 200) {
              message('出倉添加成功')
              emit('update')
          }else{
              message(data.msg,'warning')
          }
          }
          if (type == 'edit') {
              let obj = {
              id:form.id,
              remark:form.remark,
              product:JSON.stringify(form.data),
              school_id:form.school_id
              }
          const data = await updateTokes(obj)
          if (data.code == 200) {
              message('出倉修改成功')
              emit('update')
          }else{
              message(data.msg,'warning')
          }
          }

        dialogValue.value = false
      }
    })
}
const buttonType = ref('')
defineExpose({
dialogValue,buttonType
})

</script>

<style lang='less'  scoped>
.el-col{
  padding: 0 !important;
}
.product{
  .el-button{
    color: #fff;
  }
}
</style>

